<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author"
	content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.6">
<title>欢迎登陆</title>

<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resource/js/jquery-3.2.1.js"></script>
<meta name="theme-color" content="#563d7c">


<style>
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media ( min-width : 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}
</style>
<!-- Custom styles for this template -->
<link
	href="${pageContext.request.contextPath}/resource/css/floating-labels.css"
	rel="stylesheet">
</head>
<body>
	<form class="form-signin" action="/login" method="post" id="loginForm">
		<div class="text-center mb-4">
			<img class="mb-4"
				src="${pageContext.request.contextPath}/resource/img/hgshop.jpg"
				alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">豪格商城</h1>
		</div>

		<!-- 显示提示信息的区域 -->
		<div class="form-label-group">
			<span><font style="color: red" id="msg">${msg }</font></span>
		</div>
		<div>
		<div class="form-label-group">
			<input type="text" id="name1" name="telephone" class="form-control"
				placeholder="手机号" required="" autofocus=""> <label
				for="name">手机号</label>
				
		</div>
		
		
</div>
		<div class="form-label-group">
			<input type="number" id="password" name="code"
				class="form-control" placeholder="验证码" required=""> <label
				for="password">验证码</label>
		</div>
		<!-- 
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> 记住
    </label>
  </div> -->
  		<button type="button" id="sendBtn"  onclick="sendCode()" class="btn btn-primary">发送验证码</button>
		<button type="submit" id="loginBtn" class="btn btn-primary">登陆</button>
		<p class="mt-5 mb-3 text-muted text-center">© 2017-2222</p>
		<a href="toRegister">没有账号?,点击这里</a>
	</form>

	<script type="text/javascript">

	var i = 60;

	function sendCode(){


		
		$.post("./sendCode",{"telephone":$("#name1").val()},function(data){
			//
			if(data){
				var time = setInterval(function(){
					i--;
					$("#sendBtn").text(i+"s重试");
					if(i==0){
						$("#sendBtn").attr("disabled",false);
						clearInterval(time);
						$("#sendBtn").text("发送验证码");
						i=60;
					}
				},1000)
				$("#sendBtn").attr("disabled",true);
			}else{
				alert("fail!")
			}
			
		})
			
	}


	
		$("#loginBtn").click(function() {
			var formData = new FormData($("#loginForm")[0]);
			$.ajax({
				url : "login",
				data : formData,
				type : "post",
				processData : false,
				contentType : false,
				success : function(data) {
					if (data) {
						location.href="/";
					}
					else {
						alert("登录失败,重试吧!")
					}

				}
			})
		})
	</script>

</body>
</html>